<template>
  <div style="width: 100%;height: 100%;">
    <div style="width: 100%;height: 100%;" :id="mapId"></div>
  </div>
</template>

<script>
export default {
  name: 'mybar',
  props: {
    mapId: {
      type: [String],
    },
    lon: {
      type: [String,Number],
    },
    lat: {
      type: [String,Number],
    },
  },
  data () {
    return {
      map:null,
      trafficLayer:null,
      maker1:[],
      maker2:[],
      infoWindow:[],
      maker1Show:true,
      maker2Show:true,
    }
  },
  methods: {
    mapZoom(type){
      if(type=='zoomIn'){
        this.map.zoomIn()
      }else
      if(type=='zoomOut'){
        this.map.zoomOut();
      }
    },
    trafficLayerClick(type){
      if(type=='hide'){
        this.trafficLayer.hide()
      }else{
        this.trafficLayer.show()
      }
    },
    setMakerIcon20601(data){
      if(data.length>0 && this.maker1Show){
        if(this.maker1.length>0){
          this.map.remove(this.maker1);
          this.maker1=[]
        }
        for(let i=0;i<data.length;i++){
          let lonlat = [Number(data[i].longitude),Number(data[i].latitude)]
            let maker = new AMap.Marker({
              map: this.map,
              position: lonlat,
              offset: new AMap.Pixel(-15, -15), //相对于基点的偏移位置
              content: '<img style="width: 0.6rem;" src="'+require('../../assets/roadCar/icon29.png')+'">',
            });
            maker.content=data[i];
            //给Marker绑定单击事件
            maker.on('click', this.showMakerDetail);
            this.maker1.push(maker)
        }
      }
    },
    setMakerIcon20602(data){
      if(data.length>0 && this.maker1Show){
        if(this.maker2.length>0){
          this.map.remove(this.maker2);
          this.maker2=[]
        }
        for(let i=0;i<data.length;i++){
          let lonlat =  [Number(data[i].longitude),Number(data[i].latitude)]
            let maker = new AMap.Marker({
              map: this.map,
              position: lonlat,
              offset: new AMap.Pixel(-15, -15), //相对于基点的偏移位置
              content: '<img style="width: 0.6rem;" src="'+require('../../assets/roadCar/icon30.png')+'">',
            });
            maker.content=data[i];
            //给Marker绑定单击事件
            maker.on('click', this.showMakerDetail);
            this.maker2.push(maker)
        }
      }
    },

    removeMakerIcon(type){
      if(type==20601){
        this.map.remove(this.maker1);
        this.maker1=[]
        this.maker1Show=false
      }else
      if(type==20602){
        this.map.remove(this.maker2);
        this.maker2=[]
        this.maker2Show=false
      }

    },
    MakerIconShow(type){
      if(type==20601){
        this.maker1Show=true
      }else
      if(type==20602){
        this.maker2Show=true
      }

    },


    showMakerDetail(e){
      if(this.infoWindow.length>0){
        this.map.remove(this.infoWindow);
        this.infoWindow=[]
      }
      let makerData = e.target.content;
      let lonlat = [Number(makerData.longitude),Number(makerData.latitude)]
      let ondutyStr = '（离线）'
      if(makerData.onduty==1){
        ondutyStr = '（在线）'
      }
      let milesStr = "暂无数据"
      if(!!makerData.miles){
        milesStr = makerData.miles
      }
      let infoStr =
        '<div class="mapInfo">'+
          '<p>'+makerData.car_num+'（'+makerData.team_name+'）</p>'+
          '<p><img src="'+require('./../../assets/roadCar/icon26.png')+'" style=" height: 0.26rem"> '+makerData.device_code+' '+ondutyStr+'</p>'+
          '<p><img src="'+require('./../../assets/roadCar/icon15.png')+'" style=" height: 0.26rem"> '+ milesStr +'</p>'+
        '</div>';
      let maker = new AMap.Marker({
        map: this.map,
        position: lonlat,
        offset: new AMap.Pixel(-95, -110), //相对于基点的偏移位置
        content: infoStr,
      });
      maker.content=makerData.car_id;
      maker.on('click', this.goDetail);
      this.infoWindow.push(maker)
    },
    goDetail (e){
      let id = e.target.content
//      let day =  this.getNowFormatDate().replace(/-/g,'x')
      this.$router.push('/roadCarDetail/'+id)
    },
    /*获取当前的日期时间 格式“yyyy-MM-dd”*/
    getNowFormatDate() {
      let date = new Date();
      let seperator1 = "-";
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

      return currentdate;
    },
    mapSetFitView(arr){
      let temp = []
      for(let i=0;i<this.maker1.length;i++){
        temp.push(this.maker1[i])
      }
      for(let i=0;i<this.maker2.length;i++){
        temp.push(this.maker2[i])
      }
      this.map.setFitView(temp)
    },
  },
  mounted: function () {
    // `this` 指向 vm 实例
    if(!!this.lon && !!this.lat){
      var positionData=[Number(this.lon),Number(this.lat)];
      var positionData=[113.549515,24.495060];
       this.map = new AMap.Map(this.mapId, {
         resizeEnable: true,
//         center: positionData,//地图中心点
         mapStyle:'amap://styles/17fd5c05d9cba0043b92ef35c3c96c61',
         zoom: 12 //地图显示的缩放级别
       });

      this.trafficLayer = new AMap.TileLayer.Traffic({
//        zIndex: 10
      });
      this.trafficLayer.setMap(this.map);
      this.trafficLayer.hide()
    }


  },

  watch: {
    zoomType: function(val) {
    },

  },
}

</script>

<style>
  .mapInfo{background: url('./../../assets/roadCar/icon28.png') no-repeat;background-size: 100% 100%;padding: 0.2rem 0.25rem 0.5rem 0.25rem;color:#666;font-size: 0.24rem;
    transform:translate(0,-20%);
    position: relative;
    width: 3.8rem;
  }
  .mapInfo>p img{position: relative;top: 0.03rem;}

  .mapInfo>p:first-child{color:#333;font-size: 0.28rem;}
  .mapChange{position: absolute;right: 0.15rem; top: 33%;width: 0.2rem;}
</style>
